<template>
    <div class="production-plan">
      <el-button type="success" @click="addjihau" class="save-button">保存主表单和明细</el-button>
      <h3 class="title">包装成品完工</h3>
  
      <!-- 基本信息 -->
      <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="120px" class="form-container">
        <el-row :gutter="30">
          <!-- 第一行 -->
          <!-- <el-col :span="8">
            <el-form-item label="产品名称">
              <el-input 
                placeholder="请输入" 
                v-model="formData.product_name" 
                required
              >
                <template #suffix>
                  <el-button size="mini" @click="openAssociatedItemDialog">
                    <i class="el-icon-search"></i>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="产品名称" style="margin-bottom: 20px;">
              <el-input v-model="formData.product_name" placeholder="请输入编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品型号" style="margin-bottom: 20px;">
              <el-input v-model="formData.product_model" placeholder="请输入编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品规格" style="margin-bottom: 20px;">
              <el-input v-model="formData.product_specification" placeholder="请输入编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装类型" style="margin-bottom: 20px;">
              <el-input v-model="formData.packaging_type" placeholder="请输入编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装规格" style="margin-bottom: 20px;">
              <el-input v-model="formData.packaging_specification" placeholder="请输入编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装数量" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.packaging_quantity" placeholder="请输入数量" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装方式" style="margin-bottom: 20px;">
              <el-input v-model="formData.packaging_method" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产批次" style="margin-bottom: 20px;">
              <el-input v-model="formData.production_batch" placeholder="请输入备注" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="生产日期" prop="transactionTime" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.production_date"
                type="date"
                required
                placeholder="请选择事务起始时间"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产车间" style="margin-bottom: 20px;">
              <el-input v-model="formData.production_workshop" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产线" style="margin-bottom: 20px;">
              <el-input v-model="formData.production_line" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检验状态" style="margin-bottom: 20px;">
              <el-input v-model="formData.inspection_status" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <!-- 第四行 -->
          <el-col :span="8">
            <el-form-item label="检验报告编号" style="margin-bottom: 20px;">
              <el-input v-model="formData.inspection_report_number" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="质量标准" style="margin-bottom: 20px;">
              <el-input v-model="formData.quality_standard" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品标签" style="margin-bottom: 20px;">
              <el-input v-model="formData.product_label" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="条形码" style="margin-bottom: 20px;">
              <el-input v-model="formData.barcode" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="二维码" style="margin-bottom: 20px;">
              <el-input v-model="formData.qr_code" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成品数量" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.finished_product_quantity" placeholder="请输入数量" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合格数量" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.qualified_quantity" placeholder="请输入数量" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不良品数量" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.defective_quantity" placeholder="请输入数量" :min="0" :step="1" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="包装人员" style="margin-bottom: 20px;">
              <el-input v-model="formData.packaging_staff" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检验人员" style="margin-bottom: 20px;">
              <el-input v-model="formData.inspection_staff" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理人员" style="margin-bottom: 20px;">
              <el-input v-model="formData.management_staff" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" style="margin-bottom: 20px;">
              <el-input v-model="formData.remarks" placeholder="请填写" type="textarea"  />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号" style="margin-bottom: 20px;">
              <el-input v-model="formData.order_number" placeholder="请填写" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  
  
       <!--工厂选择对话框 -->
      <el-dialog
        v-model="associatedItemDialogVisible"
        width="500px"
        title="关联项目选择"
        append-to-body
      >
        <el-table
          :data="associatedItems"
          highlight-current-row
          border
          size="small"
          @current-change="handleAssociatedItemChange"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column property="teamNumber" label="业务单号" />
          <el-table-column property="factory" label="工厂" />
          <el-table-column property="workshop" label="车间" />
          <el-table-column property="department" label="部门" />
          <el-table-column type="productionLine" label="产线" />
          <el-table-column property="teams" label="班组" />
          <el-table-column property="shift" label="班次" />
          <el-table-column property="state" label="状态" />
          <el-table-column property="date" label="日期" />
          <el-table-column type="recorders" label="记录人" />
          <el-table-column property="shiftleader" label="交班班长" />
          <el-table-column property="successionMonitor" label="接班班长" />
        </el-table>
        <template #footer>
          <el-button @click="pickAssociatedItem">确定</el-button>
        </template>
      </el-dialog>
      <!-- 产品名称 -->
      <el-dialog
        v-model="associatedItemDialogVisible"
        width="500px"
        title="产品信息选择"
        append-to-body
      >
        <el-table
          :data="associatedItems1"
          highlight-current-row
          border
          size="small"
          @current-change="handleAssociatedItemChange"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column property="ProductName" label="产品名称" />
          <el-table-column property="batch" label="生产批次" />
          <el-table-column property="specification" label="包装规格" />
          <el-table-column property="packingDate" label="包装日期" />
          <el-table-column property="planPackagesNumber" label="计划包装数量" />
          <el-table-column property="packers" label="包装人员" />
          <el-table-column property="qualityInspectors" label="质检人员" />
          <el-table-column property="deviceName" label="设备编号" />
          <el-table-column property="deviceParameters" label="设备参数" />
          <el-table-column property="packageName" label="包装材料名称" />
          <el-table-column property="packingLots" label="包装材料批次" />
          <el-table-column property="massBalance" label="物料平衡" />
          <el-table-column property="testResults" label="外观检验结果" />
          <el-table-column property="inkjetEffect" label="喷码/压码效果" />
          <el-table-column property="tightness" label="密封性" />
          <el-table-column property="labeling" label="贴标情况" />
          <el-table-column property="cartoning" label="装盒、装箱情况" />
          <el-table-column property="clearSituation" label="清场情况" />
          <el-table-column property="compliance" label="操作合规性" />
          <el-table-column property="exceptionLogging" label="异常情况处理" />
          <el-table-column property="inspectionConclusion" label="检验结论" />
          <el-table-column property="reviewers" label="审核人" />
          <el-table-column property="auditDate" label="审核日期" />
        </el-table>
        <template #footer>
          <el-button @click="pickAssociatedItem">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useRouter, useRoute } from 'vue-router';
  import { Materialread, Materialwrite } from '@/axios/axiosHelper';
  import axios from 'axios';
  import { th } from 'element-plus/es/locales.mjs';
  
  const formRef = ref(null);
  const currentUser = ref("admin");
  const router = useRouter();
  const route = useRoute();
  
  // 主表单数据
  const formData = reactive({
    id: route.params.id,
  "id": 0,
        "product_name": "",
        "product_model": "",
        "product_specification": "",
        "packaging_type": "",
        "packaging_specification": "",
        "packaging_quantity": 0,
        "packaging_method": "",
        "production_batch": "",
        "production_date": "",
        "production_workshop": "",
        "production_line": "",
        "inspection_status": "",
        "inspection_report_number": "",
        "quality_standard": "",
        "product_label": "",
        "barcode": "",
        "qr_code": "",
        "finished_product_quantity": 0,
        "qualified_quantity": 0,
        "defective_quantity": 0,
        "packaging_staff": "",
        "inspection_staff": "",
        "management_staff": "",
        "remarks": "",
        "order_number": "",
        "isDel": false

  
  });
  
  // 主表单验证规则
  const rules = reactive({
    bomSubject: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ],
    productName: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ],
    documentNo: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ],
  });
  
  
  
  const getProductionById = (id) => {
  console.log('查看反填数据:', id);
  axios.get('http://localhost:5118/api/CompletedStorage/FTCompletedfinished', {
      params:{
        id: route.query.id
      }
    })
    .then(res=>{
      formData.id = res.data.data[0].id;
      formData.product_name = res.data.data[0].product_name;
      formData.product_model = res.data.data[0].product_model;
      formData.product_specification = res.data.data[0].product_specification;
      formData.packaging_type = res.data.data[0].packaging_type;
      formData.packaging_specification = res.data.data[0].packaging_specification;
      formData.packaging_quantity = res.data.data[0].packaging_quantity;
      formData.packaging_quantity = res.data.data[0].packaging_quantity;
      formData.production_batch = res.data.data[0].production_batch;
      formData.production_date = res.data.data[0].production_date;
      formData.production_workshop = res.data.data[0].production_workshop;
      formData.production_line = res.data.data[0].production_line;
      formData.inspection_status = res.data.data[0].inspection_status;
      formData.inspection_report_number = res.data.data[0].inspection_report_number;
      formData.quality_standard = res.data.data[0].quality_standard;
      formData.product_label = res.data.data[0].product_label;
      formData.barcode = res.data.data[0].barcode;
      formData.qr_code = res.data.data[0].qr_code;
      formData.finished_product_quantity = res.data.data[0].finished_product_quantity; 
      formData.qualified_quantity = res.data.data[0].qualified_quantity;
      formData.defective_quantity = res.data.data[0].defective_quantity;
      formData.packaging_staff = res.data.data[0].packaging_staff;
      formData.inspection_staff = res.data.data[0].inspection_staff;
      formData.management_staff = res.data.data[0].management_staff;
      formData.remarks = res.data.data[0].remarks;
      formData.order_number = res.data.data[0].order_number;
      formData.modelValue = res.data.data[0];
      console.log('完工入库反填数据:', res.data);
    })
  };
  
  // 明细数据列表
  const planDetailsList = ref([]);
  const attachments = ref([]);
  
  // // 保存主表单
   const addjihau = () => {
    axios.post('http://localhost:5293/api/CompletedStorage/UpdateCompletedfinished', formData)
      .then(response => {
       if (response.data.code === 200) {
         ElMessage.success('完工入库修改成功');
         console.log(response.data.data);
         router.push("/GetCompletedfinished");
      } else {
         ElMessage.error(`完工入库修改失败：${response.data.message}`);
      }
      })
  };
  
  onMounted(()=>{
    getProductionById();
  })
  
  const workOrderTypeOptions = ref([
    { value: '包装工单', label: '包装工单' },
    { value: '物料工单', label: '物料工单' },
    { value: '能源工单', label: '能源工单' },
    { value: '过滤工单', label: '过滤工单' },
    { value: '糖化工单', label: '糖化工单' },
    { value: '发酵工单', label: '发酵工单' },
    { value: '酵母工单', label: '酵母工单' },
  ]);
  
  
  // 对话框显示状态
  const associatedItemDialogVisible = ref(false);
  const currentAssociatedItem = ref({});
  // 关联项目数据
  const associatedItems = ref([]);
  // 打开关联项目选择对话框
  const openAssociatedItemDialog = () => {
    associatedItemDialogVisible.value = true;
  };
  // 当前选中的关联项目行
  const handleAssociatedItemChange = (val) => {
    currentAssociatedItem.value = val;
  };
  // 选择关联项目
  const pickAssociatedItem = () => {
    if (currentAssociatedItem.value) {
      formData.factory = currentAssociatedItem.value.factory; // 工厂
  
      formData.productionLine = currentAssociatedItem.value.productionLine; // 产线
      formData.team = currentAssociatedItem.value.teams; // 班组
      formData.shift = currentAssociatedItem.value.shift; // 班次
  
      associatedItemDialogVisible.value = false;
    }
  };
  // 获取关联项目数据
  const fetchAssociatedProjects = () => {
    axios.get("http://localhost:4829/api/Team/ShowTeam")
      .then(res => {
        associatedItems.value = res.data.data;
  
      })
  };
  
  
  onMounted(() => {
  fetchAssociatedProjects();
  
  });
  
  </script>
  
  <style scoped>
  .production-plan {
    padding: 30px;
    background-color: #f0f2f5;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
  }
  
  .title {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
  }
  
  .save-button {
    display: block;
    margin: 0 auto 30px;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
  }
  
  .form-container {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  
  .el-form-item__label {
    color: #34495e;
    font-size: 16px;
    font-weight: 500;
  }
  
  .el-input,
  .el-input-number,
  .el-date-picker {
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 14px;
  }
  
  .el-input:focus,
  .el-input-number:focus,
  .el-date-picker:focus {
    border-color: #42b983;
    outline: none;
    box-shadow: 0 0 5px rgba(66, 185, 131, 0.2);
  }
  
  </style>